﻿<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>注册</title>
	<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
	<meta name="author" content="Vincent Garreau" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<link rel="stylesheet" media="screen" href="../css/style-register.css">
	<link rel="stylesheet" type="text/css" href="../css/reset-register.css" />
	<link rel="stylesheet" href="../plugs/layui/dist/css/layui.css">
	<link rel="icon" href="../image/logo.ico" type="image/x-icon">
</head>
<style>
	span{
		color: red;
		font-size: 12px;
	}
</style>

<body>

	<div id="particles-js">
		<div class="login">
			<div class="login-top" style="margin-top: 10px;">
				注册
			</div>


			<div style="margin-left:100px; margin-bottom: 20px;">
				<div style="width: 200px;">
					<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
						<div class="layui-progress-bar" lay-percent=""></div>
					</div>
				</div>
				<div class="layui-upload-drag" id="test10" style="padding: 0px; margin:0px;">
					<div class="layui-hide" id="uploadDemoView">
						<hr>
						<img src="" id="avatar" style="max-height: 100px;">
					</div>
					<i class="layui-icon"></i>

					<p>点击上传，或将头像拖拽到此处</p>
				</div>
				<p>	<span id="tip_avatar" ></span></p>
			</div>
			



			<div class="login-center clearfix">
				<div class="login-center-img"><img src="../image/name.png" /></div>
				<div class="login-center-input">
					<input type="text" id="nickname" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
						onblur="this.placeholder='请输入您的用户名'" /><span id="tip_nickname" ></span>
					<div class="login-center-input-text">用户名</div>
				</div>
			</div>

			<div class="login-center clearfix">
				<div class="login-center-img"><img src="../image/name.png" /></div id="tip_phone">
				<div class="login-center-input">
					<input type="text" id="phone" placeholder="请输入手机号码" onfocus="this.placeholder=''"
						onblur="this.placeholder='请输入您的手机号码'" /><span id="tip_phone"></span>
					<div class="login-center-input-text">手机号</div>
				</div>
			</div>

			<div class="login-center clearfix">
				<div class="login-center-img"><img src="../image/name.png" /></div>
				<div class="login-center-input">
					<input type="text" id="email" placeholder="请输入邮箱" onfocus="this.placeholder=''"
						onblur="this.placeholder='请输入您的邮箱'" /><span id="tip_email"></span>
					<div class="login-center-input-text">邮箱</div>
				</div>
			</div>

			<div class="login-center clearfix">
				<div class="login-center-img"><img src="../image/password.png" /></div>
				<div class="login-center-input">
					<input type="password" id="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''"
						onblur="this.placeholder='请输入您的密码'" /><span id="tip_password"></span>
					<div class="login-center-input-text">密码</div>
				</div>
			</div>

			<div class="login-center clearfix">
				<div class="login-center-img"><img src="../image/password.png" /></div>
				<div class="login-center-input">
					<input type="password" id="cpassword" placeholder="请确认您的密码" onfocus="this.placeholder=''"
						onblur="this.placeholder='请输入您的密码'" />
					<div class="login-center-input-text">确认密码</div>
				</div>
			</div>

			<div class="login-button" id="register" style="margin-top: -10px;">
				注册
			</div>
		</div>
		<div class="sk-rotating-plane"></div>
	</div>

	<!-- scripts -->
	<script src="../js/jquery.min.js"></script>

	<script src="../js/particles.min.js"></script>
	<script src="../plugs/layui/dist/layui.js"></script>
	<script type="text/javascript">

		function hasClass(elem, cls) {
			cls = cls || '';
			if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
			return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
		}

		function addClass(ele, cls) {
			if (!hasClass(ele, cls)) {
				ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
			}
		}

		function removeClass(ele, cls) {
			if (hasClass(ele, cls)) {
				var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
				while (newClass.indexOf(' ' + cls + ' ') >= 0) {
					newClass = newClass.replace(' ' + cls + ' ', ' ');
				}
				ele.className = newClass.replace(/^\s+|\s+$/g, '');
			}
		}
	</script>

	<script>
		layui.use(['upload', 'element', 'layer'], function () {
			var $ = layui.jquery
				, upload = layui.upload
				, element = layui.element
				, layer = layui.layer;
			upload.render({
				elem: '#test10'
				, url: 'http://localhost:70/devu/user/upimg'
				, done: function (res) {
					layer.msg('上传成功');
					layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', "http://localhost:70/cattle-and-horses-oj-html/image/" + res.content);
				}
				, progress: function (n, elem, e) {
					element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
					if (n == 100) {
						layer.msg('上传完毕', { icon: 1 });
					}
				}
			});
		})


		$("#register").click(function () {
			let phone = $("#phone").val();
			let nickname = $("#nickname").val();
			let email = $("#email").val();
			let password = $("#password").val();
			let cpassword = $("#cpassword").val();
			
		
			if (cpassword != password) {
				layer.msg("两次密码不一致", { icon: 2, anim: 6 });
			}
			else {
				let avatar = $("#avatar").attr("src").split("/")[5];
				$.ajax({
					type: "post",
					url: 'http://localhost:70/devu/user/register',
					data: { phone: phone, nickname: nickname, email: email, password: password, avatar: avatar },
					success: function(res){
						if(res.code=="200")
						{
							
							alert("恭喜你注册成功");
							window.location="login.html";
						}
						else
						{
							let errors=res.content;
							console.log(errors);
							for (let key in errors) {
								$("#tip_"+key).text(errors[key]);
							}
						}
					}
		})	
			}
		})
	</script>
</body>

</html>